<!DOCTYPE html>
<html>
  <head>
		<title>身份认证</title>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" href="../css/supersized.css">
		<link href="../jsp/css/login.css" rel="stylesheet">
		<link href="../jsp/css/authentication.css" rel="stylesheet">
		<!-- 插件样式 -->
		<link rel="stylesheet" type="text/css" href="./css/sm.min.css">

		<!-- 插件js -->
		<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script src="./js/zepto.js"></script>
		<script src="./js/sm.min.js" ></script>
		<script src="./js/jquery.form.js"></script>
		<script src="./js/authentication.js" ></script>
		<style type="text/css">
		</style>
  </head>
  <script>
  var phone = $.getUrlParam("phone");
  var userId = $.getUrlParam("userId");
  </script>
  <body style="background: #fff;">
		<div class="container" style="overflow: scroll;">
			<!-- 用户未进行过身份认证 -->
			<div class="main_content auth_content" style="text-align : -webkit-center; display: none;">
				<!-- 步骤一  认证手机号 -->
				<div class="step_block step_01" id="step01">
					<span class="zhuce_text">步骤一：认证手机号</span>
					<ul id="send">
						<li>
							<span class="inp_txt"><i>*</i>手机号：</span>
							<input id="phone" name="phone" placeholder="请输入手机号码" class="input" maxlength="11" />
						</li>
						<li >
							<span class="inp_txt"><i>*</i>验证码：</span>
							<input id="captcha" name="captcha" placeholder="请输入验证码" class="input input2" maxlength="6" />
							<button id="getCaptchaBtn" class="get_captcha_btn">获取验证码</button></li>
						</li>
						<li >
							<button id="checkCaptchaBtn" class="next_step" disabled >下一步</button>
						</li>
					</ul>
				</div>

				<!-- 步骤二  认证姓名 & 性别 -->
				<div class="step_block step_02" id="step02">
					<span class="zhuce_text">步骤二：认证基本信息</span>
					<ul>
						<li>
							<span class="inp_txt"><i>*</i>姓名：</span>
							<input id="userName" name="name" placeholder="请输入姓名" class="input" />
						</li>
						<li>
							<span class="inp_txt"><i>*</i>性别：</span>
							<div class="inp_radio">
								<label class="sex" >
									<input type="radio" name="flag" value="0"  />
								  男
								</label>
								<label class="sex" >
									<input type="radio" name="flag" value="1"  />
									女
								</label>
							</div>
						</li>
						<li>
							<span class="inp_txt">&nbsp;&nbsp;&nbsp;行业：</span>
							<select id="jobName" class="input input2">
								<option value="0">请选择行业</option>
								<option value="1">学生</option>
								<option value="2">教师</option>
								<option value="3">国家机关</option>
								<option value="4">计算机</option>
								<option value="5">律师</option>
								<option value="5">其他</option>
							</select>
						</li>
						<li >
							<button id="baseBtn" class="next_step" disabled>下一步</button>
						</li>
					</ul>
				</div>

				<!-- 步骤三  上传身份证图片 & 身份证号码 -->
				<div class="step_block step_03" id="step03">
					<span class="zhuce_text">步骤三：填写身份证信息</span>
					<div class="tips_box">
						<em class="upload_tips">请勿遮挡证件信息</em>
						<span class="see_eg" id="seeEg">查看示例</span>
					</div>
					
					<ul>
					<form method="post" enctype="multipart/form-data" id="form1">
						<li class="upload_li">
							<div class="upload--line upload--front">
								<input type="file" name="zhengmian" class="file_img handle_upload" />
								<div class="is_upload">
									<img src="" alt="" id="frontImg" class="upload_img" />
									<span class="edit_upload"></span>
									<input type="file" name="zhengmian2" class="edit_input handle_upload" />
								</div>
							</div>
						</li>
						<li class="upload_li">
							<div class="upload--line upload--back">
								<input type="file" name="fanmian" class="file_img handle_upload" />
								<div class="is_upload">
									<img src="" alt="" id="backImg" class="upload_img" />
									<span class="edit_upload"></span>
									<input type="file" name="fanmian2" class="edit_input handle_upload"/>
								</div>
							</div>
						</li>
						</form> 
						<li>
							<span class="inp_txt id_txt"><i>*</i>身份证号码：</span>
							<input id="cardId" name="cardId" placeholder="请输入身份证号码" class="input id_input" />
							<p class="id_tips">请输入正确的身份证号码</p>
						</li>
						<li >
							<!-- 如果是业主，显示 “下一步”，继续上传证件操作，否则显示 “完成认证” -->
							<button id="finishBtn" class="next_step" disabled >完成认证</button>
						</li>
					</ul>
				</div>


				<!-- 完成验证提示 -->
				<div class="step_block step_04" id="step04">
					<div class="finsh_text">
						<span class="gou"></span>
						<span class="txt">完成身份认证！</span>
					</div>
					<a href="./home.html" class="to_page">确定</a>
				</div>
			</div>
			
			<!-- 查看示例弹窗 -->
			<div class="see-sampe-panle">
				<div class="sampe--img">
					<img src="../images/idcard1.png" alt="" />
					<img src="../images/idcard2.png" alt="" />
					<span class="close_panle" id="closePanle"></span>
				</div>
			</div>

			<!-- 用户已进行过身份认证，显示用户已填的信息 -->
			<div class="is_auth_box" style="height: 100%;">
				<h5 class="is_tit">基本信息</h5>
				<form method="post" enctype="multipart/form-data" id="form1">
				<div class="is_block">
					<p class="is_p">姓名：<span class="sp" id="name"></span></p>
					<p class="is_p">性别：<span class="sp" id="xingbie"></span></p>
					<p class="is_p">手机号：<span class="sp" id="phone"></span></p>
					<p class="is_p">行业：<span class="sp" id="job"></span></p>
					<p class="is_p">身份证号：<span class="sp" id="cardId"></span></p>
					<p class="is_p">身份证照片：</p>
					<div class="up_img">
						<div class="is_upload up_img" >
							<img src="" alt="" id="frontImg-2" class="upload_img" />
							<span class="edit_upload"></span>
							<input type="file" name="zhengmian" class="edit_input handle_upload2" onchange="changePic(this)"/>
						</div>
						<div class="is_upload up_img">
							<img src="" alt="" id="backImg-2" class="upload_img" />
							<span class="edit_upload"></span>
							<input type="file" name="fanmian" class="edit_input handle_upload2" onchange="changePic(this)"/>
						</div>
						<button id="idcard-btn" class="next_step" >上传</button>
					</div>
					
				</div>
				</form>
			</div>
		</div>

		<script src="../js/loginjs/scripts.js"></script>
		<script type="text/javascript">
			var delArr=new Array();
			var picArr = new Array();
			window.$$=window.Zepto = Zepto;
			 auth.fillPhone();
			 var sex_=null;
			 $(".sex").on("change","input",function(){
				 sex_=$(this).val();
			 });
			 function loadData(){
					if (userId) {
						$(".auth_content").remove();
						$(".is_auth_box").show();

						// 进入页面先请求身份证信息接口
						$.ajax({
							type: "POST",
							dataType: "json",
							url: '../certificate/getUserIdCardInfo',
							data: {
								userId: userId
							},
							success: function(data) {
								var arr=["学生","教师","国家机关","计算机","律师","其他"];
								if (data.success){
									$("#name").text(data.userName);
									$("#xingbie").text(data.sex);
									$("#phone").text(data.phone);
									$("#job").text(arr[data.job-1]);
									$("#cardId").text(data.idcardNo);
									if(data.imglist!=""){
										if(data.imglist[0] !=null){
											$("#frontImg-2").attr("src", data.imglist[0].imgUrl);
											picArr.push(data.imglist[0].imgUrl);
											$("#frontImg-2").parent().attr("index",0);
										}
										if(data.imglist[1] !=null){
											$("#backImg-2").attr("src", data.imglist[1].imgUrl);
											picArr.push(data.imglist[1].imgUrl);
											$("#backImg-2").parent().attr("index",1);
										}
									
									}
								}
							}
						});
					} else {
						$(".auth_content").show();
					}
			 }
			$(function() {

				loadData();

				/************** 步骤一 事件 **************/
				/** 点击获取验证码按钮  */
				$("#getCaptchaBtn").on("click",function(){
					var phone =  $("#phone").val().trim();
					if (phone) {
						if( !checkPhone(phone) ){
							$$.toast("手机号格式不正确");
							return;
						}
					} else {
						$$.toast("请输入手机号码");
						return;
					}
					
					// 禁用按钮并倒计时30s
					$("#getCaptchaBtn").attr("disabled", true).css("background", "#ccc");
					countdown(60);	
					//发送验证码
					$.ajax({
						type : "POST",
						dataType : 'json',
						url : "../sms/sendCaptcha.do",
						data : {
							"phone": phone,
							"type":0
						},
						success : function(data) {
							// console.log(data)
							if( data.resultCode != "0" ){
								$$.toast(data.msg||"获取验证码失败" );
							}
						}
					});
					
				});

				// 获取验证码后  倒计时, 禁止重复点击获取按钮
				function countdown(count) {
					var a = setInterval(function() {
						count = count-1;
						$("#getCaptchaBtn").text("重新获取("+ count +")");
						clearInterval(a);
						if(count>0){
								countdown(count);
						}else{
							$("#getCaptchaBtn").attr("disabled",false).text("获取验证码");
						}
					}, 1000);
				}

				// 默认下一步按钮不可点击，当用户输入手机号以及验证码时，按钮改成可点击
				function inputText() {
					var phone = $("#phone").val().trim();
						captcha = $("#captcha").val().trim();
					
					if ( phone && captcha ) {
						$("#checkCaptchaBtn").attr("disabled", false).css("background", "#0894ec");
					} else {
						$("#checkCaptchaBtn").attr("disabled", true).css("background", "#ccc");
					}
				}
				$("#captcha, #phone").on("input", function(){
					inputText()
				});

				/** 点击获下一步时判断验证码正确性 并 切换到步骤二  */
				$("#checkCaptchaBtn").on("click",function(){
					var phone = $("#phone").val().trim();
						captcha = $("#captcha").val().trim();
					if( !checkPhone(phone) ){
						$$.toast("手机号格式不正确");
						return;
					}
					$.ajax({
						type : "POST",
						dataType : 'json',
						url : "../sms/isPhoneCaptcha.do",
						data : {
							"phone": phone,
							"captcha": captcha
						},
						success : function(data) {
							console.log(data)
							if( data.resultCode==0){
								$("#step01").hide();
								$("#step02").show();
							}else{
								$$.toast("验证码错误或已过期" );
								return false;
							}
						}
					});
				});

				/************** 步骤二 事件 **************/
				// 默认下一步按钮不可点击，当用户输入姓名时，按钮改成可点击
				$("#userName").on("input", function(){
					var userName = $("#userName").val().trim();
					
					if ( userName ) {
						$("#baseBtn").attr("disabled", false).css("background", "#0894ec");
					} else {
						$("#baseBtn").attr("disabled", true).css("background", "#ccc");
					}
				});

				// 点击下一步，切换到步骤三
				$("#baseBtn").on("click",function(){
					$("#step02").hide();
					$("#step03").show();
				});

				/************** 步骤三 事件 **************/
				// 打开查看示例弹窗
				$("#seeEg").on("click",function(){
					$(".see-sampe-panle").css("top", "0");
				});
				// 关闭查看示例弹窗
				$("#closePanle").on("click",function(){
					$(".see-sampe-panle").css("top", "130%");
				});

				// 默认下一步按钮不可点击，当用户输入身份证号时，按钮改成可点击
				$("#cardId").on("input", function(){
					var cardId = $("#cardId").val().trim();

					if (!checkCardId(cardId)) {
						$(".step_03 .id_tips").show();
						$("#finishBtn").attr("disabled", true).css("background", "#ccc");
					} else {
						$(".step_03 .id_tips").hide();
						$("#finishBtn").attr("disabled", false).css("background", "#0894ec");
					}
				});
				
				// 上传正面/反面照片
				$(document).on('change', '.handle_upload', function () {
					var _this = $(this),
			    	_imgUrl = getObjectURL(this.files[0]);
					console.log('_imgUrl:', _imgUrl)
					_this.parents(".upload--line").find(".upload_img").attr("src", _imgUrl );
					_this.siblings(".is_upload").show();
				});

				// 点击下一步提示完成认证（需要判断是否是业主，如果是业主，显示步骤四，否则直接验证）
				// 点击下一步提示完成认证（步骤四不在这个页面完成）
				$("#finishBtn").on("click", function(){
					var _frontImg = $("#frontImg").attr("src"),
						_backImg = $("#backImg").attr("src");
						// _cardId = $("#cardId").val().trim();

					if (!_frontImg) {
						$$.toast("请上传身份证头像面照片");
						return;
					}
					if (!_backImg) {
						$$.toast("请上传身份证国徽面照片");
						return;
					}

					auth.toAuth();

					// 如果是业主，显示步骤四
					// if ('是业主') {
					// 	$("#step03").hide();
					// 	$("#step05").show();
					// } else {
					// 	auth.toAuth();
					// }
				});

				/*****************************   步骤五 事件  **********************/
				// 提交认证
				// $("#finishBtn2").on("click", function(){
				// 	auth.toAuth();
				// });


				/*****************************  用户已进行过认证 事件 ****************/
				// 修改证件图片
				$(document).on('change', '.handle_upload2', function () {
					var _this = $(this),
			    	_imgUrl = getObjectURL(this.files[0]);
					_this.siblings(".upload_img").attr("src", _imgUrl );
				});
			
			});
			
			$("#idcard-btn").on("click", function(){
				$$.showPreloader("正在上传...");
				if(delArr ==null){
					$$.toast("您没有修改身份证信息");
					return false;
				}
				$('#form1').ajaxSubmit({
					url: '../certificate/addIdCard',
					type: 'post',
					dataType: 'json',
					data: {
						userId : userId,
						delArr : JSON.stringify(delArr)
					},
					beforeSubmit: function () {},
					success: function (data) {
						$$.toast("上传成功");
						if(data.success){
							$(".auth_content, .is_auth_box").hide();
							$("#step04").show();
							loadData();
						}
						$$.hidePreloader();
					},
					error : function (err){
						$$.toast("上传失败");
						$$.hidePreloader();
					},
					clearForm: false,//禁止清楚表单
					resetForm: false //禁止重置表单
				});
			})
			
	function changePic(this_){
		var index=$(this_).parent().attr("index");
		if(delArr != ""){
			for(var i=0;i<delArr.length;i++ ){
				if(delArr[i]!=picArr[index]){
					delArr.push(picArr[index]);
				}
			}
		}else{
			delArr.push(picArr[index]);
		}
	}
		</script>

	</body>
</html>
